<template>
  <el-dialog
    :title="title"
    :close-on-click-modal="false"
    style="min-width: 1400px;"
    :visible.sync="visible">
    <el-form ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="80px">
      <div style="display: flex;">
        <div style="margin-top: 20px;">
          <span style="color: #f56c6c;margin-right: 4px">*</span>内容配置：
        </div>
        <div>
          <div v-for="(item,index) in itemList" style="margin-top: 10px;" :key="index"
               v-dragging="{ item: item, list: itemList, group: 'item' }">
            <template v-if="index<showPageNum*limit || showAll">
              <div class="move-tip-icon">&lt;&gt;</div>
              <el-autocomplete
                style="width: 240px;"
                v-model="itemList[index].selectedItem.nameCode"
                clearable
                :hide-loading="true"
                :fetch-suggestions="querySearch"
                placeholder="请输入音频ID或者音频名称"
                :trigger-on-focus="false"
                @select="handleSelect"
                @focus="getFocusInput(item,index)">
                <template slot-scope="{ item }">
                  <div>{{ item.name }}</div>
                </template>
              </el-autocomplete>
              <!-- <el-select v-model="item.selectedSubItem.id" v-if="item.subItems&&item.subItems.length>0">
                <el-option
                  v-for="subItem in item.subItems"
                  :key="subItem.id"
                  :label="subItem.itemName"
                  :value="subItem.id">
                </el-option>
              </el-select> -->
              <el-button type="danger" icon="el-icon-delete" circle @click="deleteItem(index)"
                         :style="{'margin-left':(item.subItems&&item.subItems.length>0)?'0px':'0px'}"></el-button>
            </template>
          </div>
        </div>
      </div>
      <el-form-item v-if="showPageNum*limit<itemList.length&&!showAll">
        <div class="more-tip-icon">
          <el-button type="primary" @click="showPageNum+=1" style="margin-top: 20px;" size="mini">点击展开</el-button>
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addList" style="margin-top: 20px;">新增一项</el-button>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
    <div style="margin-left: 80px;color:#f56c6c;" v-if="showErrorTip">
      <i class="el-icon-warning" style="color: red;margin-right: 10px;"></i>还有信息未填完整，请检查！
    </div>
  </el-dialog>
</template>

<script>
  export default {
    data () {
      return {
        visible: false,
        showAll: true,
        attentionTip: '',
        selectedInputItemIndex: 0,
        columnId: '',
        showErrorTip: false,
        bookConfs: [],
        itemList: [],//所有的item
        title: '',
        dataRule: {
          name: [
            {required: true, message: '配置名称不能为空', trigger: 'blur'}
          ]
        },
        showPageNum: 1,//展示的页数
        limit: 10,//每页数量
      }
    },
    methods: {
      init (columnId) {
        let _this = this
        _this.columnId = columnId
        _this.visible = true
        _this.showAll = true
        _this.showPageNum = 1
        _this.itemList = [{
          selectedItem: {//选中的音频
            'id': '',
            'nameCode': '',
          },
          selectedSubItem: {//选中的音频子项
            'id': '',
            'itemName': '',
          },
          subItems: []//当前音频的所有子项
        }]
        _this.$nextTick(() => {
          _this.$refs['dataForm'].resetFields()
          _this.$http({
            url: _this.$http.adornUrl('/audio/pbacolumnaudio/list/' + columnId),
            method: 'post',
            params: _this.$http.adornParams()
          }).then(({data}) => {
            if (data && data.code === 0 && data.data && data.data.length > 0) {
              _this.itemList = []
              data.data.forEach(function (item) {
                _this.itemList.push({
                  id: item.id,
                  selectedItem: {//选中的音频
                    'id': item. audioId,
                    'nameCode': item.nameCode,
                  },
                  selectedSubItem: {//选中的音频子项
                    'id': item.audioItemId,
                    'itemName': item. audioName,
                  },
                  subItems: item.itemList//当前音频的所有子项
                })
              })
            }
            if (_this.itemList.length > _this.limit) {//超过一页，折叠显示
              _this.showAll = false
            }
          })
        })
      },
      // 表单提交
      dataFormSubmit () {
        let _this = this
        _this.showErrorTip = false
        this.itemList.map(function (value, index, array) {
          if (!value.selectedItem.id) {
            _this.showErrorTip = true
            return
          }
        })
        if (!_this.showErrorTip) {
          var bookConfs = []
          this.itemList.map(function (value) {
            var bookConf = {audioId: value.selectedItem.id}
            if (value.selectedSubItem.id) {
              bookConf.audioItemId = value.selectedSubItem.id
            }
            if (value.id) {
              bookConf.id = value.id
            }
            bookConfs.push(bookConf)
          })
          this.$http({
            url: this.$http.adornUrl(`/audio/pbacolumnaudio/save`),
            method: 'post',
            data: this.$http.adornData({
              audioList: bookConfs,
              columnId: _this.columnId
            })
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.visible = false
                  this.$emit('refreshDataList')
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        }
      },
      addList () {
        this.showAll = true
        this.itemList.push({
          selectedItem: {//选中的音频
            'id': '',
            'nameCode': '',
          },
          selectedSubItem: {//选中的音频子项
            'id': '',
            'itemName': '',
          },
          subItems: []//当前音频的所有子项
        })
      },
      deleteItem (index) {
        if (this.itemList.length > index && this.itemList.length > 1) {
          this.itemList.splice(index, 1)
        } else if (index == 0 && this.itemList.length == 1) {
          this.itemList = [{
            selectedItem: {//选中的音频
              'id': '',
              'nameCode': '',
            },
            selectedSubItem: {//选中的音频子项
              'id': '',
              'itemName': '',
            },
            subItems: []//当前音频的所有子项
          }]
        }
      },
      getFocusInput (item, index) {
        this.selectedInputItemIndex = index
      },
      querySearch (queryString, cb) {
        this.$http({
          url: this.$http.adornUrl('/picbook/combobox/v2/listSimpleMedia/audio'),
          method: 'post',
          data: this.$http.adornData({
            'text': queryString
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            cb(data.data)
          } else {
            cb([])
          }
        }).catch(() => {
          cb([])
        })
      },
      handleSelect (item) {
        var _this = this
        _this.itemList[_this.selectedInputItemIndex].selectedItem = item
        //查询音频子项
        _this.$http({
          url: _this.$http.adornUrl(`/picbook/combobox/v2/listAudioItem/` + item.id),
          method: 'post',
          data: _this.$http.adornData({
            'id': item.id
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            _this.itemList[_this.selectedInputItemIndex].subItems = data.data
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .move-tip-icon {
    display: inline-block;
    font-size: 18px;
    font-weight: 400;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -moz-transform: rotate(90deg); /* Firefox */
    -webkit-transform: rotate(90deg); /* Safari 和 Chrome */
    -o-transform: rotate(90deg); /* Opera */
  }

  .more-tip-icon {
    font-size: 12px;
    text-align: center;
    /*transform: rotate(90deg);*/
    /*-ms-transform: rotate(90deg); !* IE 9 *!*/
    /*-moz-transform: rotate(90deg); !* Firefox *!*/
    /*-webkit-transform: rotate(90deg); !* Safari 和 Chrome *!*/
    /*-o-transform: rotate(90deg); !* Opera *!*/
  }
</style>
